<template>
  <div class="profile-container">
    <el-card shadow="never" class="profile-card">
      <!-- 头部区域 -->
      <div class="profile-header">
        <el-avatar :size="80" :src="avatarUrl" class="profile-avatar"></el-avatar>
        <div class="profile-title">
          <h2>个人中心</h2>
          <p class="welcome-text">欢迎回来，{{ cur.username }}！</p>
        </div>
      </div>

      <!-- 操作按钮组 -->
      <div class="action-buttons">
        <el-button type="primary" plain @click="goBack" class="back-button">
          <el-icon><arrow-left /></el-icon> 返回主页
        </el-button>
        <el-button
            type="primary"
            @click="toggleEdit"
            :icon="isEditing ? 'circle-close' : 'edit'"
        >
          {{ isEditing ? '取消编辑' : '编辑资料' }}
        </el-button>
      </div>

      <!-- 信息展示/编辑区域 -->
      <el-tabs v-model="activeTab" class="profile-tabs">
        <el-tab-pane label="基本信息" name="basic">
          <el-form
              ref="profileForm"
              :model="update"
              label-width="120px"
              label-position="left"
              :disabled="!isEditing"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="update.username" placeholder="请输入用户名"></el-input>
            </el-form-item>


            <el-form-item label="密码" prop="password">
              <el-input
                  v-model="update.password"
                  type="password"
                  show-password
                  placeholder="请输入新密码"
              ></el-input>
              <div class="form-tip" v-if="!isEditing">出于安全考虑，密码显示为加密状态</div>
            </el-form-item>

          </el-form>
        </el-tab-pane>

        <el-tab-pane label="其他信息" name="additional">
          <!-- 可以添加更多信息选项卡 -->
          <div class="empty-tab">
            <el-empty description="暂无其他信息"></el-empty>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 底部操作按钮 -->
      <div class="footer-actions" v-show="isEditing">
        <el-button
            type="success"
            @click="confirmSave"
            :loading="saving"
            class="save-button"
        >
          <el-icon><check /></el-icon> 保存更改
        </el-button>

        <el-popconfirm
            title="确认要重置所有修改吗？"
            @confirm="resetForm"
            width="250"
        >
          <template #reference>
            <el-button plain>重置</el-button>
          </template>
        </el-popconfirm>
      </div>

    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
  ArrowLeft,
  Check,
  Delete
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default defineComponent({
  name: 'Profile',
  components: {Delete, Check, ArrowLeft},
  setup() {
    const router = useRouter()
    const profileForm = ref()
    const activeTab = ref('basic')
    const isEditing = ref(false)
    const saving = ref(false)

    const cur = reactive({
      username: sessionStorage.getItem("username") || "用户",
      address: sessionStorage.getItem("address") || "",
    })

    const update = reactive({
      id: sessionStorage.getItem("userID") || "",
      username: cur.username,
      password: "",
    })

    const avatarUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

    const toggleEdit = () => {
      isEditing.value = !isEditing.value
      if (!isEditing.value) {
        resetForm()
      }
    }

    const resetForm = () => {
      update.username = cur.username
      update.password = ""
    }

    const confirmSave = async () => {
      try {
        await ElMessageBox.confirm('确定要保存所有修改吗？', '确认保存', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        saving.value = true
        // 这里调用保存API
        // await saveProfile()

        ElMessage.success('保存成功')
        isEditing.value = false
      } catch (error) {
        ElMessage.info('已取消保存')
      } finally {
        saving.value = false
      }
    }

    const goBack = () => {
      router.push('/customer')
    }


    return {
      profileForm,
      activeTab,
      isEditing,
      saving,
      cur,
      update,
      avatarUrl,
      toggleEdit,
      resetForm,
      confirmSave,
      goBack,
    }
  }
})
</script>

<style scoped>
.profile-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.profile-card {
  border-radius: 12px;
  padding: 24px;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.profile-avatar {
  margin-right: 20px;
  border: 2px solid var(--el-color-primary);
}

.profile-title h2 {
  margin: 0;
  font-size: 24px;
  color: var(--el-text-color-primary);
}

.welcome-text {
  margin: 8px 0 0;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.action-buttons {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
}

.profile-tabs {
  margin-top: 16px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

.form-tip {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
  margin-top: 8px;
}

.footer-actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
}

.danger-zone {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px dashed var(--el-border-color);
}

.empty-tab {
  padding: 40px 0;
}

.save-button {
  min-width: 120px;
}

.back-button {
  margin-right: auto;
}
</style>